<script setup>
import { Close } from '@element-plus/icons-vue'
const emits = defineEmits(['update:modelValue', 'quitLogin'])
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const backLogin = () => {
  window.localStorage.removeItem('userLogin')
  emits('quitLogin')
  closeDialog()
}
const closeDialog = () => {
  emits('update:modelValue', false)
}
</script>
<template>
  <div class="quit-login flex justify-center items-center">
    <div class="p-[30px] center mt-[-50px]">
      <div class="absolute right-[10px] top-[10px] cursor-pointer" @click="closeDialog">
        <el-icon size="20" color="#999"><Close /></el-icon>
      </div>
      <div class="pt-[30px] pb-[40px] tracking-[1px]">
        <div>确定退出登录吗？</div>
        <div class="mt-[10px]">如有游戏正在进行，则会断开连接</div>
      </div>
      <div class="flex">
        <div class="btn-primary w-[100%] h-[40px] rounded-md cursor-pointer" @click="backLogin">
          退出登录
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.quit-login {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  .center {
    width: 350px;
    min-height: 120px;
    text-align: center;
    border-radius: 8px;
    position: relative;
    background: #1b2b35;
    border: 1px #222 solid;
  }
}
</style>
